Imagen estática en el footer

Hablamos sobre la forma de personalizar el footer y añadíamos imagen, color y más tarde columnas, hoy vamos a añadir otra imagen pero esta vez será una imagen estática.

La imagen depende mucho de cada uno, de la temática del blog y claro está de la habilidad que tengamos para crear una imagen, en mi caso esa habilidad es... ninguna. Así que lo que hice fue tomar para los ejemplos una imagen prestada.

Podía ser esta imagen como cualquier otra aunque lo ideal es que sea una imagen de poca altura y bastante ancha aunque esto último no es problema porque la podemos centrar otro detalle que hace más atractivo este efecto es que el color de la imagen sea igual o acorde con el color de fondo de nuestro blog.

En plantilla Edición de HML (no es necesario marcar para expandir la plantilla) nos vamos al final para localizar la etiqueta </body> justo antes añadimos lo siguiente:

<div id='footer-fijo'>
<img src='url-imagen' style='position:fixed; bottom:0; right:0;height:42px;width:100%;'/>
</div>

Si deseamos que en nuestra imagen se produzca el efecto deslizante y nos lleve a Inicio en lugar del anterior código añadimos el siguiente.

<div id='footer-fijo'>
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img alt='inicio' border='0' src='url-imagen' style='position:fixed; bottom:0; right:0;'/></a>
</div>

También para el efecto deslizante añadimos ahora el script, justo antes de </head>

<script src='http://www.google.com/jsapi'/>

<script>

google.load("prototype","1.6.0.3");

google.load("scriptaculous", "1.8.2");

</script>

Al guardar los cambios en nuestra plantilla de diseño aparecerá la imagen,unas líneas de código justo antes de ]]></b:skin> solucionará ese problema.

body#layout #footer-fijo {display:none;}

Si deseamos olvidarnos de las imágenes y decidimos probar un color es mucho más rápido, nos situamos también justo antes de </body> y añadimos:


<div id='footer-fijo'>
<span style=' background:#6D993A;position:fixed; bottom:0; right:0;height:42px;width:100%;text-align:center;color: #000; font-family: Arial; font-size: 16px;'> Aquí el texto </span>
</div>


Podemos modificar
background color de fondo
height alto
width ancho
color color de fuente
font-family tipo de fuente
font-size tamaño de fuente